<template>
    <div class="block_main blue-tit">
        <el-table :data="tableData" height="500" style="width: 100%">
            <el-table-column prop="name" label="部门" fixed width="180"></el-table-column>
            <el-table-column prop="unsolve" width="180">
                <template slot="header" slot-scope="scope">待受理（累计{{headerunsolve}}件）</template>
            </el-table-column>

            <el-table-column prop="solve" label>
                <template slot="header" slot-scope="scope">已受理（累计{{headersolve}}件）</template>
            </el-table-column>
            <el-table-column prop="total" label>
                <template slot="header" slot-scope="scope">共收到（累计{{headertotal}}件）</template>
            </el-table-column>
            <el-table-column prop="solve_rate" label="完成率">
                <template slot-scope="scope">
                    <el-progress
                        :text-inside="true"
                        :stroke-width="15"
                        :percentage="scope.row.solve_rate"
                        v-if="scope.row.solve_rate == 100"
                        status="success"
                    ></el-progress>
                    <el-progress
                        :text-inside="true"
                        :stroke-width="15"
                        :percentage="percentage"
                        v-else-if="scope.row.solve_rate == null"
                    ></el-progress>
                    <el-progress
                        :text-inside="true"
                        :stroke-width="15"
                        :percentage="scope.row.solve_rate"
                        v-else
                    ></el-progress>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
            </el-table-column>
            <el-table-column prop="satisfied_rate" label="满意度">
                <template slot-scope="scope">
    <el-progress
        :text-inside="true"
        :stroke-width="15"
        :percentage="scope.row.satisfied_rate"
        v-if="scope.row.satisfied_rate == 100"
        status="success"
    ></el-progress>
    <el-progress
        :text-inside="true"
        :stroke-width="15"
        :percentage="percentage"
        v-else-if="scope.row.satisfied_rate == null"
    ></el-progress>
    <el-progress
        :text-inside="true"
        :stroke-width="15"
        :percentage="scope.row.satisfied_rate"
        v-else
    ></el-progress>
</template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import actionurl from "../../assets/js/actionurl";

export default {
    name: "tableChart",
    props: {
        chartOptions: Object,
        chartData: Object
    },
    data() {
        return {
            tableData: [],
            page: 1,
            percentage: 0,
            headerunsolve: 0,
            headersolve: 0,
            headertotal: 0
        };
    },
    methods: {
        getEventStatusList(page) {
            var _this = this;
            actionurl.EventStatusList(
                {
                    num: 20,
                    page: page
                },
                function(re) {
                    // console.log(re)
                    if (re.status == "0") {
                        _this.tableData = re.data.list;
                        console.log(re.data.list);
                        var newsArr = JSON.parse(JSON.stringify(re.data.list));

                        for (var i = 0; i < newsArr.length; i++) {
                            _this.headerunsolve += parseInt(newsArr[i].unsolve);
                            _this.headersolve += parseInt(newsArr[i].solve);
                            _this.headertotal += parseInt(newsArr[i].total);
                        }
                    }
                }
            );
        }
    },
    mounted() {},
    created() {
        this.getEventStatusList(this.page);
    }
};
</script>
<style scoped lang="scss">
.persent {
    width: 80%;
    height: 10px;

    display: flex;
    justify-content: space-between;
    position: relative;
    padding-right: 40px;
    span {
        background: #ccc;
        width: 100%;
        line-height: 10px;
        b {
            background: green;
            width: 100%;
            height: 100%;
            display: inline-block;
            float: left;
        }
    }
    em {
        line-height: 10px;
        position: absolute;
        right: 0;
    }
}
</style>

